import React, { useState, useEffect } from 'react'
import axios from 'axios'
/**
 * 自定义hooks
 * 当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。
 * 必须以“use”开头吗？必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包
 * 含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则
 * use开头好处: 有人帮你纠错、检查
 */
//为preview 组件提供数据
const usePreviewData = (props) => {
  const [num, setNum] = useState("")
  useEffect(() => {
    // 地址/cnode/user/alsotang && /topic_collect/i5ting
    const fetchData = async () => {
      try {
        const result = await axios.get(`http://www.mei.com/appapi/product/getProductPrice/v3?productId=${props.match.params.id}&userLevel=2&type=0`)
        setNum(result.data.retDto.discount)
      } catch (error) {
        console.log(error)
      }
    };
    // 调用
    fetchData();
    // 销毁
    return () => { }
  }, [props])
  return { num }
}

const Preview = (props) => {
  // console.log(props) //函数式组件从函数的形参中就能拿到属性
  let { num } = usePreviewData(props)
  return (
    <div>
      <p>魅力惠裙子折扣: {num}</p>
    </div>
  )
}

export default Preview
